<template>
  <div class="common_wrap">
    <div class="common_title">自主申报工作管理</div>
    <el-form
      ref="queryForm"
      :model="queryParams"
      label-width="100px"
      inline
      class="search-nav"
    >
      <el-form-item prop="status" label="状态：">
        <el-select v-model="queryParams.status">
          <el-option
            v-for="item in statusList"
            :key="item.index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间：" prop="allTime">
        <el-date-picker
          v-model="allTime"
          format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item prop="areaId" label="区域/机构：">
        <el-select
          v-model="queryParams.areaId"
          placeholder="请选择区域/机构"
          filterable
          clearable
        >
          <el-option
            v-for="(item, i) in areaList"
            :key="i"
            :value="item.areaId"
            :label="item.areaName"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="indicator" label="提交人：">
        <el-select
          v-model="queryParams.indicator"
          placeholder="请选择提交人"
          filterable
          clearable
        >
          <el-option
            v-for="(item, i) in personList"
            :key="i"
            :value="item.empId"
            :label="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getTableData"
          >查询</el-button
        >
        <el-button
          type="primary"
          plain
          icon="el-icon-refresh"
          @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <div class="quota_wrap">
      <div class="quota_list" v-if="dataList.length">
        <div class="quota_item" v-for="item in dataList" :key="item.index">
          <div class="left">
            <div class="title">
              <div class="tit">{{ item.title }}</div>
              <div class="status" :class="formateStateColor(item.reviewStatus)">
                {{ formateState(item.reviewStatus) }}
              </div>
            </div>
            <div class="person">
              <div>提交人：</div>
              <div>
                {{ item.name }}({{ item.areaName }}-{{ item.positionName }})
              </div>
            </div>
            <div class="date">{{ formateDate(item.gmtCreate) }}</div>
          </div>
          <div class="right">
            <el-button type="primary" @click="toDetail(item)"
              >查看详情</el-button
            >
          </div>
        </div>
      </div>
      <div
        v-else
        style="
          font-size: 24px;
          text-align: center;
          height: 80px;
          line-height: 80px;
          color: #ccc;
        "
      >
        暂无数据
      </div>
    </div>
    <el-pagination
      v-if="dataList.length"
      class="pagination-container"
      :background="true"
      :current-page="queryParams.page"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="queryParams.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="sizeChange"
      @current-change="currentChange"
    />
  </div>
</template>

<script>
export default {
  name: "ContentManage",
  data() {
    return {
      queryParams: {
        status: "",
        startDate: "",
        endDate: "",
        indicator: "",
        page: 1,
        limit: 10,
      },
      personList: [],
      statusList: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "待审核",
          value: "0",
        },
        {
          label: "已审核",
          value: "1",
        },
        {
          label: "未通过",
          value: "2",
        },
      ],
      allTime: [],
      dataList: [],
      areaList: [],
      total: 0,
    };
  },
  watch: {
    allTime(val) {
      if (val) {
        this.queryParams.startDate = val[0];
        this.queryParams.endDate = val[1];
      } else {
        this.queryParams.startDate = "";
        this.queryParams.endDate = "";
      }
    },
  },
  computed: {
    formateState() {
      return function (state) {
        switch (state) {
          case 0:
            return "待审核";
          case 1:
            return "已审核";
          default:
            return "未通过";
        }
      };
    },
    formateStateColor() {
      return function (state) {
        switch (state) {
          case 1:
            return "success";
          case 2:
            return "fail";
          default:
            return "";
        }
      };
    },
    formateDate() {
      return function (date) {
        const time = new Date(date);
        const year = time.getFullYear();
        const month =
          time.getMonth() + 1 > 9
            ? time.getMonth() + 1
            : "0" + (time.getMonth() + 1);
        const day = time.getDate() > 9 ? time.getDate() : "0" + time.getDate();
        const hour =
          time.getHours() > 9 ? time.getHours() : "0" + time.getHours();
        const minutes =
          time.getMinutes() > 9 ? time.getMinutes() : "0" + time.getMinutes();
        return year + "-" + month + "-" + day + "  " + hour + ":" + minutes;
      };
    },
  },
  created() {
    this.getPersonList();
    this.getAreaList();
    this.getTableData();
  },
  methods: {
    getAreaList() {
      this.$api
        .areaList({
          limit: 9999,
          page: 1,
        })
        .then((res) => {
          if (res.status === 200) {
            this.areaList = res.data.records;
          } else {
            this.areaList = [];
          }
        });
    },
    getPersonList() {
      const params = {
        page: 1,
        limit: 9999,
        level: 0,
      };
      this.$api.empList(params).then((res) => {
        if (res.data.errno === 200) {
          this.personList = res.data.data.items;
        }
      });
    },
    resetQuery() {
      this.queryParams = {
        status: "",
        startDate: "",
        endDate: "",
        indicator: "",
        page: 1,
        limit: 10,
        areaId: "",
      };
      this.getTableData();
    },
    getTableData() {
      const params = {
        page: this.queryParams.page,
        limit: this.queryParams.limit,
        areaId: this.queryParams.areaId,
        auditStatus: this.queryParams.status - 0,
        startTime: this.queryParams.startDate,
        endTime: this.queryParams.endDate,
        employeeId: this.queryParams.indicator,
      };
      this.$api.declareList(params).then((res) => {
        if (res.data.code === 200) {
          this.dataList = res.data.data.items;
          this.total = res.data.data.total;
        } else {
          this.dataList = [];
        }
      });
    },
    toDetail(item) {
      this.$router.push({
        path: "/contentManageDetail",
        query: {
          ...item,
        },
      });
    },
    // 每页显示数量变化
    sizeChange(size) {
      this.queryParams.limit = size;
      this.queryParams.page = 1;
      this.getTableData();
    },
    // 当前页变化
    currentChange(current) {
      this.queryParams.page = current;
      this.getTableData();
    },
  },
};
</script>

<style scoped>
.quota_item {
  width: 100%;
  border: 1px solid #efefef;
  display: flex;
  padding: 10px 15px;
  border-radius: 10px;
  margin-bottom: 20px;
  justify-content: space-between;
  box-shadow: 5px 5px 5px #ddd;
  box-sizing: border-box;
}
.quota_item .right {
  display: flex;
  align-items: center;
}
.quota_item .left .title {
  display: flex;
  margin-bottom: 15px;
}
.quota_item .left .title .tit {
  font-size: 18px;
  font-weight: bold;
  margin-right: 30px;
}
.quota_item .left .title .status {
  width: 70px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border: 1px solid #7f7f7f;
  color: #7f7f7f;
  border-radius: 5px;
}
.quota_item .left .title .status.success {
  border: 1px solid #4ca5f1;
  color: #4ca5f1;
}
.quota_item .left .title .status.fail {
  border: 1px solid #f60e36;
  color: #f60e36;
}
.quota_item .left .person {
  display: flex;
  font-size: 14px;
  color: #333;
  margin-bottom: 15px;
}
.quota_item .left .date {
  color: #999;
}
</style>